
var $com;
var MyComponent = {
  data () {
    return {
      list: []
    }
  },
  created () {
    $com = this;
    //初始化数据
    this.getListData();
  },
  methods: {
    getListData () {
      $com.list.splice(0)
      //从后台读取数据绑定在list中
      for (let index = 0; index < 20; index++) {
        this.list.push({ key: index, text: Math.random() * 100000 })
      }
    },
    itemDbClick (item) {//双击给左边设置值
      $this.editFormFileds.Resume = item.text;
    },
    hover ($e) {
      $e.target.style.background = "#f7f7f7"
    },
    mouseout ($e) {
      $e.target.style.background = "#ffffff"
    },
  },
  //创建自定义组件模板
  template: ` <div> <div  style=" margin-left: 20px;
                    background-color: rgb(240; 250; 255);
                    margin-top: -14px;
                    position: absolute;
                    right: 0;
                    left: 0;
                    top: 15px;
                    height: 170px;
                    z-index: 999;
                    border-radius: 4px;
                    border:1px solid rgb(228 226 226);">
                
  <el-scrollbar style="height:100%;">
    <div class="srcoll-content">
      <ul>
        <li style="border-bottom: 1px solid #eee;
              padding: 11.7px 16px;
              cursor: pointer;"
            @dblclick="itemDbClick(item)"
            @mouseenter="hover"
            @mouseout="mouseout"
            v-for="(item,index) in list"
            :key="index">{{item.text}}</li>
      </ul>
    </div>
  </el-scrollbar>
</div>
</div> `
};


//声明vue对象
let $this;
let extension = {
  components: {
    gridHeader: '',
    gridBody: '',
    gridFooter: '',
    modelHeader: '',
    modelBody: '',
    modelFooter: ''
  }, //动态扩充组件或组件路径
  buttons: { box: [] },
  methods: { //事件扩展
    onInit () {
      //必须
      this.boxOptions.height = 450;
      $this = this;
      //动态挂载自己加的MyComponent组件
      this.$options.components['my-Component'] = MyComponent;
      //在表单配置的第二行后，将MyComponent组件添加到表单中
      this.editFormOptions[1].push({
        // colSize: 12, //设置为当前组件100%宽度
        render: function (createElement, ctx) {
          //挂载组件
          return createElement($this.$options.components['my-Component'])
        }
      })
      //给城市下拉框字段注册选中事件，选中后给右边list重新绑定数据源
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == 'City') {
            item.onChange = (val) => {
              $com.getListData(val);
            }
          }
        })
      });
    },
    modelOpenAfter (row) { //打开弹出框后给组件设置不同的值

    }
  }
};
export default extension;